<template>
    <div class="regist">
        <h2 style="text-align:center;margin-bottom: 30px;">注册信息</h2>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="姓名" prop="username">
                <el-input v-model="ruleForm.username"></el-input>
            </el-form-item>
            <el-form-item label="所属部门" prop="region">
                <el-select v-model="ruleForm.region" placeholder="请选择所属部门" style="width: 500px;">
                    <el-option label="电子商务部" value="dianshang"></el-option>
                    <el-option label="高校升学部" value="gaokao"></el-option>
                    <el-option label="智能制造部" value="zhizao"></el-option>
                    <el-option label="现代服务部" value="fuwu"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="性别" prop="sex">
                <el-radio-group v-model="ruleForm.sex">
                    <el-radio label="男"></el-radio>
                    <el-radio label="女"></el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input v-model="ruleForm.password"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">立即注册</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { register } from '@/api/user'
export default {
    data() {
        return {
            ruleForm: {
                username: '',
                region: '',
                sex: '',
                password: ''
            },
            rules: {
                username: [
                    { required: true, message: '请输入姓名', trigger: 'blur' },
                    { min: 3, max: 7, message: '长度在 3 到 7 个字符', trigger: 'blur' }
                ],
                region: [
                    { required: true, message: '请选择所属部门', trigger: 'change' }
                ],
                sex: [
                    { required: true, message: '请选择性别', trigger: 'change' }
                ],
                password: [
                    { required: true, message: '请填写注册密码', trigger: 'blur' }
                ]
            }
        };
    },
    methods: {
        submitForm(formname) {
            this.$refs[formname].validate(async (valid) => {
                if (valid) {
                    // alert('submit!');
                    // console.log(this.ruleForm)
                    const res = await register(this.ruleForm)

                    if (res.code == 200) {
                        this.$message({
                            message: "注册成功",
                            type: "success"
                        })
                    }
                    this.$router.push('/login')

                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formname) {
            this.$refs[formname].resetFields();
        }
    }
}
</script>
<style  scoped>
.regist {
    width: 600px;
    margin: 0 auto;
}
</style>